<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒模型练习</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .BigBox{
                width: 1005px;
                height: 806px;
                position: absolute;
                top:0px;
                left:0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                background: #fdd4e2;
            }
            .BigBox ul{
                width: 1002px;
                height: 806px;
                overflow: hidden;
                margin: 0 1px 0 2px;
            }
            .BigBox ul li{
                width: 240px;
                box-sizing: border-box;
                border: 1px solid #e0e0e0;
                list-style: none;
                float: left;
                position: relative;
                margin-bottom: 14px;
                margin-right: 14px;/*由于外边距的添加，导致转递到了父元素，从而导致，距离变大*/
            }
            ul li:nth-child(1),ul li:nth-child(2),ul li:nth-child(3),ul li:nth-child(4){
                height: 398px;
                border-top: 0;
            }
            ul li:hover{
                border-color: #f10180;
            }
            ul li:nth-child(5),ul li:nth-child(6),ul li:nth-child(7),ul li:nth-child(8){
                height: 394px;
                border-bottom: 0;
                margin-bottom: 0;
            }
            ul li:nth-child(4),ul li:nth-child(8){
                margin-right: 0;
            }
            .BigBox-1{
                width: 238px;
                height: 219px;
                background: url("img/1.jpg") no-repeat;
                background-size: 100% 100%;
             }
            .BigBox-2{
                width: 238px;
                height: 178px;
                background: #ffffff;
                overflow: hidden;
                text-align: center;
            }
            .BigBox-3{
                width: 104px;
                height: 54px;
                box-sizing: border-box;
                background:#ffffff url("img/2.jpg") no-repeat center;
                background-size: 78px 26px;
                border: 1px solid #e6e6e6;
                position: absolute;
                top: 48%;
                left: 30%;
            }
            .BigBox-2 h3{
                font-size: 17px;
                line-height: 17px;
                margin-top: 53px;
            }
            .BigBox-2 p{
                font-size: 17px;
                margin-top: 13px;
                color: #f10180;
            }
            .BigBox-2 span{
                 font-size: 24px;
                 font-weight: bold;
             }
            .BigBox-2 span:nth-child(3){
                width: 192px;
                height: 30px;
                font-size: 14px;
                line-height: 30px;
                margin-top: 23px;
                display: inline-block;
                color: #f10180;
                border: 1px solid #f10180;
            }
            .BigBox-2 span:nth-child(3):hover{
                background:#f10180;
                color: #ffffff;
            }
            .s{
                height: 219px;
            }
        </style>
    </head>
    <body>
        <div class="BigBox">
            <ul>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span>立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span>立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span>立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span>立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span  style="margin-top: 20px">立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span  style="margin-top: 20px">立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3>太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span  style="margin-top: 20px">立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
                <li>
                    <div class="BigBox-1"></div>
                    <div class="BigBox-2">
                        <h3 style="font-size: 15px;">太平鸟女装大牌专场日</h3>
                        <p><span>0.9</span>折起</p>
                        <span style="margin-top: 20px">立即抢购</span>
                    </div>
                    <div class="BigBox-3"></div>
                </li>
            </ul>
        </div>
    </body>
</html>